<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>导演管理</el-breadcrumb-item>
      <el-breadcrumb-item>导演列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchFomr" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="searchFomr.directorName"
          placeholder="请输入导演姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线  列表页面-->
    <el-divider></el-divider>
    <PersonItem
      v-for="item in directorList"
      :key="item.id"
      :pid="item.id"
      :pname="item.director_name"
      :pavatar="item.director_avatar"
      @delete="onDelete(item.id)"></PersonItem>
  </div>
</template>

<script>
import PersonItem from "../../components/PersonItem.vue"
export default {
  components: { PersonItem },

  data() {
    return {
      directorList: null,
      searchFomr: {
        directorName: "", //绑定导演姓名
      },
    }
  },
  methods: {
    // 点击搜索按钮时执行
    onSearch() {
      if (!this.searchFomr.directorName.trim()) {
        this.loadDirectorList()
        return
      }
      let name = this.searchFomr.directorName
      // 模糊查询
      this.$http.DirectorApi.seach({ name }).then((res) => {
        if (res.data.code == 200) {
          this.directorList = res.data.data
          this.searchFomr.directorName = ""
        }
      })
    },
    // 加载导演列表
    loadDirectorList() {
      this.$http.DirectorApi.list({ page: 1, pagesize: 100 }).then((res) => {
        console.log(res)
        if ((res.data.code = 200)) {
          this.directorList = res.data.data
        }
      })
    },
    // 监听删除事件
    onDelete(id) {
      this.$http.DirectorApi.delete({ id: id }).then((res) => {
        console.log(`删除导演成功`)
        if (res.data.code == 200) {
          this.$message.success("删除成功")
          // console.log("用户删除了一个导演")
          this.loadDirectorList()
        }
      })
    },
  },
  mounted() {
    // 加载导演列表
    this.loadDirectorList()
  },
}
</script>
<style scoped></style>
